<script setup>
    import { ref } from 'vue';
	// 获取窗口信息, 获取导航栏高度 windowInfo.statusBarHeight
	const windowInfo = uni.getWindowInfo()
	// #ifdef MP-WEIXIN || MP-ALIPAY
	// 获取小程序胶囊按钮信息，H5 没有胶囊按钮，所以需要条件编译
	const menuRect = uni.getMenuButtonBoundingClientRect()
	// console.log(menuRect)
	// #endif

	// #ifndef MP
	// 注意：非小程序端没有胶囊按钮信息，通过条件编译，设置宽度为 0 即可，否则浏览器报错
	const menuRect = {
		width: 0
	}
	// #endif

	// 1. 定义数据，工作的项目，这些数据都是后端返回的
	const entryList = ref([
		{
			icon: 'https://p0.ssl.qhimg.com/t01f222be1309c2fd7f.png',
			text: '全局产品'
		},
		{
			icon: 'https://p4.ssl.qhimg.com/t01d7427e1f6239b1b1.png',
			text: '360搜索'
		},
		{
			icon: 'https://p2.ssl.qhimg.com/t0199146ed535ecd65e.png',
			text: '360商城'
		},
		{
			icon: 'https://p1.ssl.qhimg.com/t0192c6a682125e6cc9.png',
			text: '360游戏'
		},
	])
	
	// 手机软件
	const softwareList = ref([
		{
			icon:'https://p3.ssl.qhimg.com/t0128439c6143122bad.png',
			name: '手机卫士',
			size: 8.95,
			download: 'https://sjws.ssl.qihucdn.com/mobilesafe/shouji360/360safe/500193/360MobileSafe.apk'
		},
		{
			icon:'https://p2.ssl.qhimg.com/t01fa9c1531e3294ca3.png',
			name: '手机助手',
			size: 27.75,
			download: 'https://app.api.sj.360.cn/channel/getUrl?src=100130&app=zs'
		},
		{
			icon:'https://p1.ssl.qhimg.com/t01d5f0eeb2cc0b0ecd.png',
			name: '浏览器',
			size: 79.20,
			download: 'http://msedown.360safe.com/360mse/360mse_17104513.apk'
		},
		{
			icon:'https://p3.ssl.qhimg.com/t015eebd58e3c9362f7.png',
			name: '清理大师',
			size: 5.8,
			download: 'http://shouji.360.cn/360cleandroid/m/'
		},
		{
			icon:'https://p3.ssl.qhimg.com/t01a555ce62565c3aa9.png',
			name: '极速浏览器',
			size: 54.10,
			download: '手机卫士下载链接'
		},
		{
			icon:'https://p1.ssl.qhmsg.com/t01ac094f0e7138f4c1.png',
			name: '省电王',
			size: 2.8,
			download: '手机助手下载链接'
		},
		{
			icon:'https://p4.ssl.qhmsg.com/t01e4c126e44c6e0e47.png',
			name: '免费WIF',
			size: 3.8,
			download: '手机卫士下载链接'
		},
		{
			icon:'https://p2.ssl.qhimg.com/t01cbde8755c0c23978.jpg',
			name: '安全客',
			size: 9.98,
			download: '手机助手下载链接'
		},
	])
	
	// 通过 API 方式跳转页面
	const goToPage = (url) => {
		// 通过 API 方式跳转页面, 优势：可以处理跳转前的业务逻辑，如：判断用户是否已登录，再跳转到不同页面
		// uni.navigateTo({
		// 	url: url
		// })
		
		// #ifdef MP-WEIXIN
		// 条件编译：微信小程序支持通过 API 方式打开其他微信小程序
		uni.navigateToMiniProgram({
			// 链接可以通过【小程序菜单】->【复制链接】
			shortLink: '#小程序://滴滴出行丨打车骑行火车租车代驾/4kuRTwro0NzKX4n'
		})
		// #endif
	}
	
	// 5. 智能硬件
	const hardwareList = ref([
		{
			type: 'hardware-item01',
			name: '360智能摄像机',
			desc: '有家有TA 安心相伴',
			icon: 'https://p0.ssl.qhimg.com/t014d0b0d86ea859959.png'
		},
		{
			type: 'hardware-item02',
			name: '360家庭防火墙',
			desc: '极速上网 安全无忧',
			icon: 'https://p3.ssl.qhimg.com/t0128f83364e8c9d4be.png'
		},
		{
			type: 'hardware-item02',
			name: '360儿童手表',
			desc: '为爱守护 乐享生活',
			icon: 'https://p0.ssl.qhimg.com/t010035192a7645472c.png'
		},
		{
			type: 'hardware-item03',
			name: '360行车记录仪',
			desc: '安全驾驶 为您保驾护航',
			icon: 'https://p3.ssl.qhimg.com/t01d3e53e82813eec78.png'
		},
		{
			type: 'hardware-item03',
			name: '360扫地机器人',
			desc: '解放双手 智享生活',
			icon: 'https://p5.ssl.qhimg.com/t012fa14e716336e657.png'
		},
		{
			type: 'hardware-item01',
			name: '360生态链',
			desc: '生态互联 牵手未来',
			icon: 'https://p1.ssl.qhimg.com/t01a44368ac0c2055a4.png'
		},
	])
	
	// 6. 返回顶部
	const scrollTop = ref(0)
	const backTop = () => {
		scrollTop.value = 0
	}
	
	// 定时器 id，用于实现防抖
	let timerId = -1
	// 是否显示返回顶部按钮
	const isShowTop = ref(false)
	// 滚动时触发 @scroll
	const onScroll = (event) => {
		// 用于实现防抖
		clearTimeout(timerId)
		// 保存滚动条位置
	    timerId = setTimeout(()=>{
			// 保存滚动条位置的值
		    scrollTop.value = event.detail.scrollTop
			// 判断滚动条位置是否超过 200
			if(scrollTop.value >= 200) {
				// 如果超过 200 就显示返回顶部按钮
				isShowTop.value = true
			} else {
				// 没超过就隐藏按钮，通过 v-show 控制图片的隐藏
				isShowTop.value = false
			}
	    }, 100)
	}
	
	// 顶部菜单交互效果
	const isShowMenu = ref(false)
</script>

<template>
	<!-- 写结构 -->
	<!-- 1. 自定义导航栏 -->
	<view class="header" :style="{
		paddingTop: windowInfo.statusBarHeight + 'px', 
		paddingRight: menuRect.width + 10 + 'px',
		height: menuRect.height + 10 + 'px'
	}">
		<!-- 左侧LOGO -->
		<image class="header-logo" src="https://p2.ssl.qhimg.com/t01893213e448dbbfa2.png" mode="heightFix"></image>
		<!-- 右侧菜单 -->
		<image @click="isShowMenu = !isShowMenu" class="header-menu" src="https://p1.ssl.qhmsg.com/t010fa93a99715aad32.png" mode=""></image>
		
		<!-- 菜单列表 -->
		<view class="header-menu-list" :class="isShowMenu ? 'is-show-menu' : '' ">
			菜单列表
		</view>
	</view>
	<!-- scroll-view 滚动容器 -->
	<scroll-view scroll-y scroll-with-animation :scroll-top="scrollTop" @scroll="onScroll" class="scroll-body" :style="{
		height: `calc( 100vh - ${menuRect.height + 10 + 'px'} - ${ windowInfo.statusBarHeight + 'px' } )`
	}">
	<!-- 2. 轮播图 -->
	<swiper class="swiper-banner" 
		autoplay 
		circular 
		indicator-dots 
		interval="2000" 
		indicator-color="rgba(255,255,255, 0.3)"
		indicator-active-color="#fff">
		<swiper-item>
			<image class="swiper-image" src="https://p2.ssl.qhimg.com/t011e7a7b3f6cc9bfdd.jpg" mode=""></image>
		</swiper-item>
		<swiper-item>
			<image class="swiper-image" src="https://p2.ssl.qhimg.com/t011e7a7b3f6cc9bfdd.jpg" mode=""></image>
		</swiper-item>
		<swiper-item>
			<image class="swiper-image" src="https://p2.ssl.qhimg.com/t011e7a7b3f6cc9bfdd.jpg" mode=""></image>
		</swiper-item>
	</swiper>
	<!-- 3. 产品入口 -->
	<!-- 布局公式
	  1. 排版
	  2. 内容
	  3. 美化
	  
	  数据驱动视图
	  1. 定义数据
	  2. 绑定数据
	  3. 修改数据
	 -->
	<view class="entry">
		<!-- v-for 循环生成列表项, item 表示循环项 -->
		<view v-for="item in entryList" :key="item.text" class="entry-item">
			<!-- :src="绑定图片地址" -->
			<image class="entry-image" :src="item.icon" mode="heightFix"></image>
			<text class="entry-text">{{ item.text }}</text>
		</view>
	</view>
	<!-- 分割模块 -->
	<view class="divider"></view>
	<!-- 
	 布局公式
	   1. 排版
	   2. 内容
	   3. 美化
	 -->
	<!-- 4. 手机软件 -->
	<view class="software">
		<text class="software-title">手机软件</text>
		<!-- row 横排  wrap 换行 -->
		<view class="software-list row wrap">
			<!-- column 竖排 -->
			<view v-for="item in softwareList" :key="item.name" class="software-item column">
				<image @click="goToPage('/pages/software/software')" class="software-image" :src="item.icon" mode=""></image>
				<text class="software-name">{{ item.name }}</text>
				<text class="software-size">{{ item.size }}M</text>
				<!-- 添加条件编译：H5端才支持下载链接 -->
				<!-- #ifdef H5 -->
				<a :href="item.download" class="software-download">下载</a>
				<!-- #endif -->
				
				<!-- #ifdef MP-WEIXIN -->
				<!-- 添加条件编译：小程序页面跳转，只能跳转本地页面。目标页面必须在 pages.json 中注册。 -->
				<!-- <navigator url="/pages/software/software"  class="software-download">查看</navigator> -->
				<!-- 通过 target="miniProgram" 和 short-link  可以打开其他小程序 -->
				<navigator target="miniProgram" short-link="#小程序://滴滴出行丨打车骑行火车租车代驾/4kuRTwro0NzKX4n" class="software-download">打开</navigator>
				<!-- #endif -->
			</view>
		</view>
	</view>
	<!-- 分隔块 -->
	<view class="divider"></view>
	<!-- 5. 智能硬件 -->
	<view class="hardware">
		<text class="floor-title">智能硬件</text>
		<view class="hardware-list">
			<view v-for="item in hardwareList" :key="item.name" :class="item.type">
				<!-- 这是标题 -->
				<text class="hardware-name">{{ item.name }}</text>
				<!-- 不是形态2时，介绍文字放前面 -->
				<text v-if="item.type !== 'hardware-item02'" class="hardware-desc">{{ item.desc }}</text>
				<!-- 这是图片 -->
				<image class="hardware-image" :src="item.icon" mode="widthFix"></image>
				<!-- 如果是形态2时，介绍文字放后面 -->
				<text v-if="item.type === 'hardware-item02'" class="hardware-desc">{{ item.desc }}</text>
			</view>
			<!-- 查看更多 -->
			<view class="hardware-item03">
				形态1 - 查看更多
			</view>
		</view>
	</view>
	
	<view style="width: 398rpx; height: 398rpx; background-color: pink;">
		盒子400rpx
	</view>
	
	<view style="width: 200rpx; height: 200rpx; background-color: deeppink;">
		盒子200rpx
	</view>
	
	</scroll-view>
	<!-- 6. 返回顶部 -->
	<image v-show="isShowTop" @click="backTop" class="back-top" src="../../static/top.png" mode=""></image>
</template>

<style lang="scss">
	@import "../../uni.scss";
	/* 写样式 */
	/* 自定义导航栏 */
	.header {
		/* width: 375px; */

		/* rpx 响应式像素，是小程序用于实现屏幕适配新增的单位 */
		/* 屏幕宽度统一为 750rpx，相当于把屏幕分成了 750 份 */

		/* width: 750rpx; */
		/* #ifdef MP */
		height: 80rpx;
		/* #endif */

		/* #ifdef H5 */
		height: 96rpx;
		/* #endif */

		background-color: $uni-color-primary;

		padding-top: 60rpx;
		padding-left: 20rpx;

		/* flex 模式 */
		display: flex;
		/* 主轴对齐 */
		justify-content: space-between;
		/* 交叉轴对齐 */
		align-items: center;
		// 相对定位 - 子绝父相
		position: relative;
		z-index: 1;
		
		/* 自定义导航栏 - logo */
		.header-logo {
			width: 166rpx;
			height: 64rpx;
		}
		
		// 菜单按钮
		.header-menu {
			width: 44rpx;
			height: 32rpx;
		}
		
		// 菜单列表 - 点击菜单按钮后显示
		.header-menu-list {
			width: 100%;
			height: 330rpx;
			// 背景为半透明颜色
			background-color: rgba(0, 0, 0, 0.5);
			// 绝对定位 - 子绝父相
			position: absolute; 
			// left 靠左边缘对齐
			left: 0;
			// bottom 设置为负值，盒子反方向移动，盒子高度 330rpx，反向移动 -330rpx ，能刚好贴着父级底部
			bottom: -330rpx;
			
			// 过渡动画效果控制显隐
			transition: all 0.4s;
			// 隐藏时，透明度 0
			opacity: 0;
			// 交互穿透，不影响后面元素的点击或者滑动
			pointer-events: none;
		}
		
		// 是否显示菜单
		.is-show-menu{
			// 显示时，透明度 1
			opacity: 1;
			// 恢复能被交互
			pointer-events: auto;
		}
	}
	
	/* 2. 轮播图模块 */
	.swiper-banner,
	.swiper-image {
		width: 100%;
		height: 416rpx;
	}
	
	/* 3. 产品入口 */
	/* scss => super css => css 预处理器 */
	.entry {
		display: flex;
		height: 120rpx;
		padding-top: 60rpx;
		padding-bottom: 20rpx;
		
		.entry-item{
			width: 25%;
			/* 修改 flex 主轴方向为垂直 */
			display: flex;
			flex-direction: column;
			border-right: 1rpx solid #ddd;
			align-items: center;
		}
		
		.entry-image{
			width: 92rpx;
			height: 82rpx;
			margin-bottom: 10rpx;
		}
		
		.entry-text{
			font-size: 24rpx;
		}
	}
	
	// 手机软件
	.software{
		// padding-top: 50rpx;
		// padding-left: 30rpx;
		// padding-right: 30rpx;
		// padding-bottom: 50rpx;
		padding: 50rpx 30rpx;
		// 标题
		.software-title {
			font-size: 48rpx;
			color: #333;
		}
		
		// 列表项
		.software-item {
			margin-top: 20rpx;
			width: 25%;
			display: flex;
			// 设置 flex 主轴方向
			flex-direction: column;
			// 交叉轴居中
			align-items: center;
		}
		
		.software-name {
			margin-top: 10rpx;
			font-size: 30rpx;
			color: #333;
		}
		
		.software-size{
			font-size: 30rpx;
			color: #cdcdcd;
		}
		
		.software-download{
			margin-top: 10rpx;
			color: $uni-color-primary;
			background-color: #E2F2E2;
			font-size: 30rpx;
			width: 100rpx;
			height: 50rpx;
			border-radius: 25rpx;
			text-align: center;
			line-height: 50rpx;
		}
		
		// 图片
		.software-image{
			width: 96rpx;
			height: 96rpx;
		}
	}
	
	// 通用标题
	.floor-title {
		display: flex;
		font-size: 48rpx;
		color: #333;
		padding: 40rpx 20rpx;
	}
	
	
	// 智能硬件
	.hardware {
		overflow: hidden;
		// 三种形态
		.hardware-item01,
		.hardware-item02,
		.hardware-item03 {
			// 浮动 -> 环绕效果
			float: left;
			// 盒子模型：边框盒子 => 宽度高度包含 border 和 padding
			box-sizing: border-box;
			width: 50%;
			border-top: 1rpx solid #f60;
			padding: 40rpx;
		}
		
		.hardware-name {
			display: block;
		}
		
		.hardware-item01 {
			// 布局错乱 BUG 分析：
			// 在 iPhone 15 Pro Max 上：形态一的盒子 400rpx 转换成了 229px
			// 而形态二的盒子 200rpx 转换成 114px，由于形态一的盒子多了 1px，最终导致布局错乱
			// BUG定位：rpx 底层会自动转换成 px，出现小数会四舍五入，导致出问题了
			// 解决方案：减少形态一盒子的高度为 398rpx，最终转换成 228px 与右侧形态二盒子对齐
			height: 398rpx;
		}
		
		.hardware-item02 {
			height: 200rpx;
			padding-right: 0;
			padding-bottom: 0;
			
			.hardware-image {
				float: right;
				width: 168rpx;
				height: 112rpx;
			}
		}
		
		.hardware-item03 {
			height: 350rpx;
		}
		
		.hardware-list {
			// :nth-child() 伪类选择器，选中第 1，4，6 个子元素，添加右边框
			view:nth-child(1),
			view:nth-child(4),
			view:nth-child(6) {
				border-right: 1rpx solid #f60;
			}
		}
		
		.hardware-name {
			font-size: 30rpx;
			color: #333;
		}
		
		.hardware-desc {
			font-size: 26rpx;
			color: #999;
			margin-top: 20rpx;
		}
		
		.hardware-image {
			width: 270rpx;
			height: 178rpx;
		}
		
	}
	
	// <scroll-view scroll-y>
	.scroll-body {
		// 相对于视口的长度单位 vh 和 vw。
		// 1vh 意味着值为视口高度的 1%，同理 1vw 即值为视口宽度的 1%。
		// calc() 此 CSS 函数允许在声明 CSS 属性值时执行一些计算。
		// 利用 calc() 减去自定义导航栏的高，得到滚动容器的高。
		height: calc(100vh - 100rpx);
	}
	
	.back-top {
		width: 80rpx;
		height: 80rpx;
		background-color: $uni-color-primary;
		// position: relative;  // 相对于自身定位
		// position: absolute; // 相对于定位的父元素
		position: fixed; // 相对于视口定位
		right: 40rpx;
		bottom: 80rpx;
		border-radius: 50%;
		// 添加 padding 让图片变小，同时设置为边框盒子模型，添加 padding 后盒子不会增大
		padding: 10rpx;
		box-sizing: border-box;
	}
</style>